<template>
  <div id='accepted'>
    <van-tabs animated
      @click=onClick
      color='rgba(26, 144, 255)'>
      <van-tab title="待 完 成"
        name=1>
      </van-tab>
      <van-tab title="待被确认"
        name=2>
      </van-tab>
      <van-tab title=" 已 超 时 "
        name=-1>
      </van-tab>
      <van-tab title="已 完 成"
        name=3>
      </van-tab>
    </van-tabs>
    <div class='box'>
      <v-list>
        <h4
          v-if='tasklist.length?false:true'>
          暂无任务</h4>
        <div class='message'
          :v-if='tasklist.length?true:false'
          v-for='(item,index) in tasklist'
          :key=index>
          <div
            @touchstart='gettaskinfo(item.mid,item.uid)'>
            <van-icon
              class='icon'
              size='40'
              color='rgba(26, 144, 255)'
              :name='item.typeicon' />
            <span
              class='messageinfo'>
              <h4>
                类型:{{item.typename}}
              </h4>
              <span
                class='user'>价格:{{item.price}}元</span>
              <span
                class='time'>截至时间:{{item.finishTime}}</span>
            </span>
          </div>
          <!-- <button
            v-if='status==1?true:false'></button> -->
          <button
            v-if='status=="1"?true:false'
            @touchstart='finishMission(item.mid)'>完成</button>

        </div>
      </v-list>
    </div>
    <component :is=name
      @func='send'>
      <van-cell-group>
        <van-field
          v-model='taskinfo.typename'
          label="类型"
          disabled />
        <van-field
          v-model='taskinfo.price'
          label="价格"
          disabled />
        <van-field
          type='textarea'
          v-model='taskinfo.detail'
          label="详情"
          disabled />
        <van-field
          v-model="taskinfo.finishTime"
          label="截止时间"
          disabled />
        <div class='imgbox'>
          <img
            v-for='(item,index) in imgUrlarr'
            :key=index
            :src=item>
        </div>
      </van-cell-group>
    </component>
  </div>
</template>

<script>
import time from '../../JS/time'
import changType from '../../JS/type.js'
import { Dialog } from 'vant'
export default {
  name: 'accepted',
  data() {
    return {
      status: 1,
      tasklist: [],
      taskinfo: {},
      name: '',
      imgUrlarr: [],
    }
  },
  props: {},
  components: {
    'v-list': () => import('../../components/list'),
    'v-taskinfo': () => import('../../components/taskinfo'),
  },
  computed: {},
  watch: {},
  created() {
    this.tasklist = []
    this.gettaskList()
  },
  mounted() {},
  methods: {
    gettaskList() {
      this.http({
        method: 'post',
        url: '/api/listUserReceivedMissionsByStatus',
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded',
        },
        params: {
          uid: window.localStorage.getItem('uid'),
          token: window.localStorage.getItem('token'),
          status: this.status,
        },
      }).then((res) => {
        this.tasklist = res.data.data
        changType(this.tasklist)
      })
    },
    onClick(name, title) {
      this.http({
        method: 'post',
        url: '/api/listUserReceivedMissionsByStatus',
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded',
        },
        params: {
          uid: window.localStorage.getItem('uid'),
          token: window.localStorage.getItem('token'),
          status: name,
        },
      }).then((res) => {
        this.status = name
        this.tasklist = res.data.data
        changType(this.tasklist)
      })
    },
    gettaskinfo(id, uid) {
      this.imgUrlarr = []
      for (var key in this.tasklist) {
        if (this.tasklist[key].mid == id) {
          this.taskinfo = this.tasklist[key]
        }
      }
      this.name = 'v-taskinfo'
      //获取图片
      this.http({
        method: 'post',
        url: '/api/getImageByExample',
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded',
        },
        params: {
          uid: window.localStorage.getItem('uid'),
          token: window.localStorage.getItem('token'),
          mid: id,
          userId: uid,
        },
      }).then((res) => {
        var resinfo = res.data.data
        resinfo.forEach((v, k) => {
          this.imgUrlarr.push('http://' + resinfo[k].url)
        })
      })
    },
    finishMission(id) {
      Dialog.confirm({
        message: '是否确认已经完成？',
        confirmButtonColor: 'rgba(26, 144, 255, 0.8)',
      }).then(() => {
        console.log(id)
        this.http({
          method: 'post',
          url: '/api/finishMission',
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
          },
          params: {
            uid: window.localStorage.getItem('uid'),
            token: window.localStorage.getItem('token'),
            mid: id,
          },
        }).then((res) => {
          this.gettaskList()
        })
      })
    },
    send(data) {
      this.name = data
    },
  },
}
</script>

<style scoped lang='less'>
.van-button--primary {
  background-color: rgba(26, 144, 255, 0.8);
  border: 1px solid rgba(26, 144, 255, 0.8);
}
#accepted {
  width: 100%;
  height: 100%;
  background-color: #f8f8f8;
  display: flex;
  flex-direction: column;
  position: relative;
  .van-tabs {
    flex-direction: column;
  }
  .box {
    background-color: #f8f8f8;
    overflow-y: scroll;
  }
}
</style>
